<template>
	<view class="app-upload-image">
		<view class='upload-box'>
			<view class='flex-wrap'>
				<view v-for='(item, index) in imageList' :key='item.id' class='img-box'>
					<view mode="aspectFill" @click='remove(index)' class='remove cross-center main-center'>x</view>
					<image @click='previewImage(index)' :style="{height:height+'rpx'}" :src='item' mode="scaleToFill" class='img'></image>
				</view>
				<view @click='chooseImage'>
					<!-- <view v-if='isAddImg' :style="{'margin':margin + 'rpx'}"
						:class="{'other-border': diy ? true : false}"
						class="add-img dir-top-nowrap cross-center main-center">
						<image mode="aspectFill" class='add-img-icon' :src='defaultImg'></image>
						<text class='text'>{{text}}</text>
						<text class='text' v-if="showNumber">(最多{{maxNum}}张)</text>
					</view> -->
					<view class="fidcard" v-if='isAddImg' :style="{'margin':margin + 'rpx',height:height+'rpx'}">
						<view class="fidcardup" :style="{height:minheight+'rpx'}">
							<view class="fidcardup-hor"></view>
							<view class="fidcardup-ver"></view>
						</view>
						<view class="fidcardt" v-if="istitle">
							<text class='text' v-if="showNumber">最多{{maxNum}}张</text>
							<text class='text' v-else>{{text}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'app-upload-image',
		props: {
			value: {
				default: null,
			},
			defaultImg: {
				// 添加图片的默认背景图片
				type: String,
				default: '/static/image/icon/icon-image.png'
			},
			maxNum: {
				// 可添加最大图片数量
				type: Number,
				default: 3
			},
			// 标记
			// 当组件用于循环时使用
			sign: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#f7f7f7',
			},
			margin: {
				type: String,
				default: '10'
			},
			diy: {
				type: Boolean,
				default: false
			},
			showNumber: {
				type: Boolean,
				default: true,
			},
			text: {
				type: String,
				default: '上传图片',
			},
			count: {
				type: Number,
				default: 9
			},
			height: {
				type: Number,
				default: 192
			},
			minheight: {
				type: Number,
				default: 126
			},
			istitle: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				imageList: this.value ? this.value : [],
				isAddImg: true
			}
		},
		methods: {
			// 上传最大图片数量
			checkMaxNum() {
				let status = this.imageList.length >= this.maxNum ? false : true;
				this.isAddImg = status;
			},
			// 移除图片
			remove(index) {
				let imageList = this.imageList;
				let data = imageList.splice(index, 1);
				this.imageList = imageList;
				this.checkMaxNum();

				// 触发事件 tabEvent
				this.$emit('imageEvent', {
					imageList: imageList,
					sign: this.sign
				})
			},
			// 选择图片
			chooseImage() {
				let self = this;
				let imageList = self.imageList;
				self.$emit('cancelon', {
					upvipic: true
				})
				uni.chooseImage({
					count: self.maxNum,
					success: function(e) {
						for (let i in e.tempFilePaths) {
							if (i >= (self.maxNum - imageList.length)) {
								break;
							}
							let fileName = '';
							// #ifdef MP-BAIDU
							fileName = e.tempFilePaths[i].substr(e.tempFilePaths[i].lastIndexOf('/') + 1);
							// #endif
							uni.uploadFile({
								url: self.$api.upload.file,
								filePath: e.tempFilePaths[i],
								name: 'file',
								fileType: 'image',
								formData: {
									file: e.tempFilePaths[i],
									file_name: fileName,
								},
								success(res) {
									const data = res.data;
									let result = null;
									if (typeof data === 'string') {
										result = JSON.parse(data);
									} else {
										result = data;
									}
									// console.log(result);
									if (result.code == 0) {
										imageList.push(result.data.url)
										self.imageList = imageList;
										self.checkMaxNum();
										self.$emit('imageEvent', {
											imageList: imageList,
											sign: self.sign
										})
									} else {
										uni.showModal({
											title: '',
											content: result.msg,
											showCancel: false,
										})
									}
								},
								fail(e) {
									if (e && e.errMsg) {
										uni.showModal({
											title: '错误',
											content: e.errMsg,
											showCancel: false,
										});
									}
								},
							});
						}
					},
					complete: function(e) {
						// 触发事件 tabEvent
						self.$emit('imageEvent', {
							imageList: imageList,
							sign: self.sign
						})
					}
				})
			},
			// 图片预览
			previewImage(index) {
				let imageList = this.imageList;
				uni.previewImage({
					current: imageList[index],
					urls: imageList
				})
			},
		},
		created() {
			this.checkMaxNum();
		}
	}
</script>
<style lang="scss" scoped>
	.upload-box {
		background-color: #fff;
	}

	.upload-box .title {
		padding: 15#{rpx} 0 15#{rpx} 20#{rpx};
	}

	.upload-box .img {
		/* width: 188#{rpx};
		height: 188#{rpx}; */
		width: 170rpx;
		height: 192rpx;
		// margin: 10#{rpx};
		
		display: block;
		border-radius: 16rpx;
	}

	.upload-box .add-img {
		width: 188#{rpx};
		height: 188#{rpx};
		border: 1#{rpx} dotted $uni-weak-color-one;
		background-color: #fff;
	}

	.upload-box .add-img .text {
		color: $uni-general-color-two;
		font-size: $uni-font-size-weak-two;
	}

	.upload-box .add-img-icon {
		width: 56#{rpx};
		height: 56#{rpx};
		margin-bottom: 10#{rpx};
	}

	.upload-box .img-box {
		position: relative;
		margin-right: 20rpx;
		&:nth-child(3n){
			margin: 0;
		}
	}


	.upload-box .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.upload-box .add-img.other-border {
		border: 1#{rpx} solid $uni-weak-color-one
	}
	
	
	.fidcard {
		background: #FFFFFF;
		width: 170rpx;
		height: 192rpx;
		border: 2rpx solid #F4F4F4;
		box-sizing: border-box;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.fidcardup {
		background: #F4F4F4;
		width: 170rpx;
		height: 126rpx;
		position: relative;
	}
	
	.fidcardup-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
	}
	
	.fidcardup-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
		background: #FFFFFF;
	}
	
	.fidcardt {
		line-height: 64rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
</style>
